<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <div>{{msg}}</div>
    </div>
    <script src="../vue.js"></script>
    <script>
        let vm=new Vue({
            el:'#app',
            data () {
                return {
                    msg:'hello',
                }
            },
            methods: {},
            beforeCreate () {
                console.group('beforeCreate');
                console.log(this.$el);
                console.log({
                    el:this.$el,
                    msg:this.msg,
                })
            },
            created () { //之前还没渲染 所以要改变值后，渲染一次就可以
                this.msg='world';  
                console.group('created');
                console.log(this.$el);
                console.log({
                    el:this.$el,
                    msg:this.msg,
                });
            },
            beforeMount () {
                console.group('beforeMount');
                console.log(this.$el);
                console.log({
                    el:this.$el,
                    msg:this.msg,
                })
            },
            mounted () { //因为之前已经完成渲染 所有要改变值 就要再渲染一次 所以会产生抖动（与create的区别）
                console.group('mounted');
                console.log(this.$el);
                console.log({
                    el:this.$el,
                    msg:this.msg,
                })
            },
            beforeUpdate () {
                console.group('beforeUpdate');
                console.log(this.$el);
                console.log({
                    el:this.$el,
                    msg:this.msg,
                })
            },
            updated () {
                console.group('updated');
                console.log(this.$el);
                console.log({
                    el:this.$el,
                    msg:this.msg,
                })
            },
            beforeDestroy () {
                console.group('beforeDestroy');
                console.log(this.$el);
                console.log({
                    el:this.$el,
                    msg:this.msg,
                })
            },
            destroyed () {
                console.group('destroyed');
                console.log(this.$el);
                console.log({
                    el:this.$el,
                    msg:this.msg,
                })
            }
        })
    </script>
</body>
</html>